<template>
  <div>
    <!-- Form -->
    <el-button type="NewlyBuild" @click="edit">编辑</el-button>
    <el-dialog title="编辑中央动态" :visible.sync="dialogFormVisible" width="530px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!--标题-->
        <el-form-item label="标题：" prop="title">
          <el-input v-model="ruleForm.title" placeholder="请输入标题" style="margin-left:-115px"></el-input>
        </el-form-item>
        <!--分类-->
        <el-form-item label="分类：">
          <el-select v-model="ruleForm.type" placeholder="请选择分类" style="margin-left:-115px">
            <el-option
              v-for="item in list"
              :key="item.index"
              :label="item.itemName"
              :value="item.itemValue"
            ></el-option>
          </el-select>
        </el-form-item>
        <!--本地图片选择-->
        <div class="pic-box">
          <h1 class="h1-1">选择图片：</h1>
          <!--图片上传开始-->
          <div class="upload-box">
            <el-upload
              action
              list-type="picture-card"
              :file-list="fileList"
              :auto-upload="false"
              :before-upload="beforeAvatarUpload"
              :on-change="handleChange"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt />
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in"></i>
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt />
            </el-dialog>
          </div>
          <!--图片上传结束-->
          <!--<Upload></Upload>-->
        </div>
        <!--图片提示文字及边框-->
        <div class="flex-box">
          <div class="pic-Tips">
            <h1>1.请上传PNG、JPG或者JPEG图片，大小不超过10MB; ;</h1>
            <h1>2.图片尺寸约为1200*120px；</h1>
          </div>
        </div>
        <!--链接-->
        <el-form-item label="链接：" prop="url">
          <el-input v-model="ruleForm.url" placeholder="请输入链接" style="margin-left:-115px"></el-input>
        </el-form-item>
      </el-form>

      <!--结束-->
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import Upload from "@/components/Upload/Upload.vue";
export default {
  components: {
    Upload,
  },
  data() {
    return {
      // 分类列表
      list: [],
      //图片上传
      dialogImageUrl: "",
      //控制图片是否课件
      dialogVisible: false,
      //控制按钮是否课件
      disabled: false,
      fileList: [],
      //文本框
      textarea200: "",
      dialogFormVisible: false,
      ruleForm: {
        title: "",
        type: "",
        pic: "",
        url: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入图片名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change",
          },
        ],
      },
      id1: "",
      id2: "",
      pareolId: "",
    };
  },
  props: ["id", "get"],
  created() {},
  methods: {
    // 编辑
    edit() {
      this.dialogFormVisible = true;
      this.Api.getClassify({
        typeCode: "ZYDT_SORT_LEVREL1",
      }).then((res) => {
        this.list = res.data;
        // console.log(this.list);
      });
      this.Api.EditCenter({ id: this.id }).then((res) => {
        // console.log(res, "单个数据获取");
        this.ruleForm = {};
        this.ruleForm = {
          title: res.data.title,
          type: res.data.exList[0].type + "",
          pic: res.data.exList[0].pic,
          url: res.data.exList[0].url,
        };
        this.id1 = res.data.id;
        this.id2 = res.data.exList[0].id;
        this.pareolId = res.data.exList[0].pareolId;
        this.fileList = [
          {
            url:
              this.$store.state.PortalManagement.fileIp +
              res.data.exList[0].pic,
          },
        ];
      });
      console.log(123);
    },
    // 提交
    sure() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.Api.newCenter({
            id: this.id1,
            title: this.ruleForm.title,
            exList: [
              {
                id: this.id2,
                patrolId: this.patrolId,
                type: this.ruleForm.type,
                pic: this.ruleForm.pic,
                url: this.ruleForm.url,
              },
            ],
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success('编辑成功')
              this.dialogFormVisible = false;
              this.get();
            }else{
              this.$message.error(res.message)
            }
          });
        } else {
          return false;
        }
      });
    },

    //图片上传的方法
    handleChange(file, fileList) {
      // console.log(file, fileList);
      const formData = new FormData();
      //在file里面追加一个对象
      formData.append("file", file.raw);
      // console.log(formData,111)
      this.Api.uploadImage(formData).then((res) => {
        // var data = {
        //   ...this.ruleForm,
        //   picUrl: res.data.url,
        //   pic: res.data.url,
        // };
        // console.log(res, 111);
        // this.$emit("update:ruleForm", data);
        this.$set(this.ruleForm, "pic", res.data.url);
      });
    },
    handleRemove(file) {
      this.fileList = [];

      // console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //图片上传限定图片类型
    beforeAvatarUpload(file) {
      const isJPG = file.type === "png/jpeg/jpg";
      const isLt2M = file.size / 180 / 52 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是png/jpeg/jpg格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小约为180*52!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-button--NewlyBuild {
  width: 60px;
  height: 28px;
  background: rgba(61, 127, 255, 1);
  border-radius: 4px;
  color: white;
  padding: 0;
  margin-right: 20px !important;
}
/deep/.el-dialog__wrapper {
  z-index: 9999 !important;
  > .el-dialog {
    > .el-dialog__header {
      background: rgba(230, 233, 237, 1);
      border-radius: 8px 8px 0px 0px;
      border: 1px solid rgba(230, 233, 237, 1);
      padding: 11px 20px 11px 24px;
      > .el-dialog__title {
        font-size: 18px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        line-height: 24px;
        padding-right: 375px;
      }
      > .el-dialog__headerbtn {
        top: 15px;
      }
    }
    .el-dialog__body {
      padding: 30px 43px 0 42px;
      > .el-form {
        > .el-form-item {
          margin: 0 0 16px 0;
          > .el-form-item__label {
            width: 85px !important;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            padding: 0;
          }
          > .el-form-item__content {
            .el-input__inner {
              width: 260px !important;
              height: 36px;
              background: rgba(255, 255, 255, 1);
              border-radius: 4px;
              border: 1px solid rgba(221, 221, 221, 1);
              padding-left: 12px;
            }
          }
        }
        .pic-box {
          display: flex;
          padding-bottom: 10px;
          .h1-1 {
            width: 85px;
            height: 22px;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #333333;
            text-align: right;
          }
          .h1-1::before {
            content: "* ";
            color: #ff0000;
          }
        }
        .flex-box {
          display: flex;
          justify-content: flex-end;

          .pic-Tips {
            width: 360px;
            padding-top: 6px;
            padding-bottom: 15px;
            border-top: 1px solid #dddddd;
            h1 {
              font-size: 12px;
              font-family: PingFangSC-Regular, PingFang SC;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);
              line-height: 22px;
              text-align: left;
            }
          }
        }
      }
    }
    .el-dialog__footer {
      padding: 30px 30px 26px;
      .dialog-footer {
        .el-button--default {
          width: 70px;
          height: 36px;
          background: rgba(255, 255, 255, 1);
          border-radius: 3px;
          border: 1px solid rgba(215, 219, 224, 1);
          padding: 0;
          color: rgba(51, 51, 51, 1);
        }
        .el-button--primary {
          width: 70px;
          height: 36px;
          background: rgba(61, 127, 255, 1);
          border-radius: 3px;
          padding: 0;
          color: rgba(255, 255, 255, 1);
        }
      }
    }
  }
}
/**图片上传大小修改88px */
/deep/.el-upload--picture-card {
  width: 88px;
  height: 88px;
  display: flex;
  justify-content: center;
  align-items: center;
}
/deep/.el-upload-list__item {
  width: 88px;
  height: 88px;
  margin-right: 0px;
}
/deep/.el-icon-zoom-in {
  font-size: 10px;
}
/deep/.el-icon-delete {
  font-size: 10px;
}
.upload-box {
  width: 88px;
  height: 88px;
  overflow: hidden;
  ul {
    li {
      div {
        > span {
          display: flex;
        }
      }
    }
  }
}
/deep/.el-upload-list__item-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>